<script setup>
import { computed } from 'vue';
    const props = defineProps(["progress","maxProgress"])

    const width = computed(()=> {
        return props.progress / props.maxProgress * 100 + "%"
    })
</script>
<template>

<div class="progress">
        <div class="relprogress">{{ props.progress }}热度</div>
      </div>
</template>
<style scoped>
.progress{
  background-color: rgb(3, 37, 103);
  border-radius: 20px;
  /* 空首格 */
  text-indent: 0.5rem;
  white-space: nowrap;
}
.relprogress{
  width: v-bind(width);
  background-color: #f00;
  border-radius: 20px;
  background-image: linear-gradient(90deg,red 30%,rgb(100, 2, 43));
}
</style>